import { Modal, ConfigProvider, theme, Button } from 'antd';
import React from 'react';
import { createRoot } from 'react-dom/client';

/**
 * 创建一个适应主题模式的 Modal
 * @param {boolean} isDarkMode - 是否为深色模式
 * @param {object} config - Modal 配置
 * @returns {object} - 包含 destroy 方法的对象
 */
const createThemedModal = (isDarkMode, config) => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  
  const root = createRoot(container);
  
  const destroy = () => {
    root.unmount();
    if (container.parentNode) {
      container.parentNode.removeChild(container);
    }
  };

  const ModalComponent = () => {
    const handleOk = () => {
      if (config.onOk) {
        const result = config.onOk();
        // 如果返回 Promise，等待完成后再关闭
        if (result && typeof result.then === 'function') {
          result.finally(() => destroy());
        } else {
          destroy();
        }
      } else {
        destroy();
      }
    };

    const handleCancel = () => {
      if (config.onCancel) {
        config.onCancel();
      }
      destroy();
    };

    // 根据不同类型设置不同的 footer
    let footer;
    if (config.footer === null) {
      footer = null;
    } else if (config.footer) {
      footer = config.footer;
    } else if (['success', 'error', 'warning', 'info'].includes(config.type)) {
      // 单按钮类型的 Modal
      footer = [
        <Button key="ok" type="primary" onClick={handleOk}>
          {config.okText || '确定'}
        </Button>
      ];
    } else {
      // confirm 类型的 Modal
      footer = [
        <Button key="cancel" onClick={handleCancel}>
          {config.cancelText || '取消'}
        </Button>,
        <Button key="ok" type="primary" onClick={handleOk}>
          {config.okText || '确定'}
        </Button>
      ];
    }

    return (
      <ConfigProvider
        theme={{
          algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
          token: {
            colorPrimary: "#1890ff",
            colorBgBase: isDarkMode ? "#141414" : "#ffffff",
            colorTextBase: isDarkMode ? "#ffffff" : "#000000",
          },
        }}>
        <Modal
          {...config}
          open={true}
          footer={footer}
          onCancel={handleCancel}
          afterClose={destroy}
        />
      </ConfigProvider>
    );
  };

  root.render(<ModalComponent />);

  return { destroy };
};

/**
 * 主题化的 Modal 工具函数
 * @param {boolean} isDarkMode - 是否为深色模式
 */
export const createThemedModalMethods = (isDarkMode) => ({
  confirm: (config) => createThemedModal(isDarkMode, {
    ...config,
    type: 'confirm',
  }),
  
  success: (config) => createThemedModal(isDarkMode, {
    ...config,
    type: 'success',
  }),
  
  error: (config) => createThemedModal(isDarkMode, {
    ...config,
    type: 'error',
  }),
  
  warning: (config) => createThemedModal(isDarkMode, {
    ...config,
    type: 'warning',
  }),
  
  info: (config) => createThemedModal(isDarkMode, {
    ...config,
    type: 'info',
  }),
});

/**
 * 创建一个 hook 来使用主题化的 Modal
 * @param {boolean} isDarkMode - 是否为深色模式
 */
export const useThemedModal = (isDarkMode) => {
  return createThemedModalMethods(isDarkMode);
};